<!DOCTYPE html>
<html>
<head>
    <title>扫码支付订单列表</title>
    <!--#include("../common/common-link.html"){}-->
    <style type="text/css">
        .table-panel .conditions .col .input-group {
            width: 320px;
        }

        .table-panel .conditions .col .type-input-group {
            width: 160px;
        }

        .table-panel .conditions .col .type-input-group .addon {
            background-color: #5cb85c;
            border-color: #4cae4c;
            color: #fff;
        }

        .table-panel .conditions .col .type-input-group .type-input-group-btn {
            width: 90px;
        }

        .table-panel .conditions .col .type-input-group .type-input-group-btn .btn-success {
            border-left-color: #2cae4c
        }

        .table-panel .conditions .col .status {
            width: 103px;
        }

        .table-panel .conditions .col .ok-btn {
            width: 90px;
        }

        .table-panel .table-content .operation .btn {
            width: 89px;
        }

        .drawback-btn {
            margin: 5px;
        }
    </style>
</head>
<body>
<div id="container-wrap" style="display:none;">
    <div class="table-panel">
        <div class="header">
            <h4 class="title">条件筛选</h4>
        </div>
        <div class="conditions">
            <div class="col">
                <div class="input-group">
                    <span class="input-group-addon addon">商户名称</span>
                    <input type="text" class="form-control" :value="form.companyName" v-model="form.companyName">
                </div>
            </div>
            <div class="col">
                <div class="input-group">
                    <span class="input-group-addon addon">会员手机</span>
                    <input type="text" class="form-control" :value="form.memberPhone" v-model="form.memberPhone">
                </div>
            </div>
            <div class="col">
                <div class="input-group">
                    <span class="input-group-addon addon">会员昵称</span>
                    <input type="text" class="form-control" :value="form.memberName" v-model="form.memberName">
                </div>
            </div>
            <br>
            <div class="col">
                <div class="input-group">
                    <span class="input-group-addon addon">订单编号</span>
                    <input type="text" class="form-control" :value="form.sn" v-model="form.sn">
                </div>
            </div>
            <div class="col" style="margin-right:0;">
                <div class="input-group time">
                    <span class="input-group-addon">支付开始时间</span>
                    <input type="text" id="begin_pay_time" class="form-control" readonly :value="form.beginPayTime"
                           v-model="form.beginPayTime">
                </div>
            </div>
            <div class="col" style="margin-right:0;height:33px;line-height: 33px;">-</div>
            <div class="col">
                <div class="input-group time">
                    <span class="input-group-addon">支付结束时间</span>
                    <input type="text" id="end_pay_time" class="form-control" readonly :value="form.endPayTime"
                           v-model="form.endPayTime">
                </div>
            </div>
            <br>
            <div class="col">
                <div class="input-group type-input-group">
                    <span class="input-group-addon addon">支付方式</span>
                    <div class="input-group-btn type-input-group-btn">
                        <button type="button" class="status btn btn-success dropdown-toggle" data-toggle="dropdown">
                            <span class="type-txt">{{channelTxt}}&nbsp;&nbsp;</span><span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a href="javascript:void(0)" @click="channelSelect(-1)">全部</a></li>
                            <li><a href="javascript:void(0)" @click="channelSelect(1)">支付宝</a></li>
                            <li><a href="javascript:void(0)" @click="channelSelect(2)">微信</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col">
                <input class="btn button ok-btn" type="button" value="查&emsp;询" @click="query">
                <input class="btn button reset-btn" type="button" value="重&emsp;置" @click="reset">
            </div>
        </div>
        <div class="header">
            <h4 class="title">订单列表</h4>
            <div class="btns-group">
                <input type="button" class="btn btn-primary addBtn" @click="orderExport" value="订单导出"/>
            </div>
        </div>
        <div class="content">
            <table class="table-content">
                <tr>
                    <th width="5%">序号</th>
                    <th width="20%">订单号</th>
                    <th width="19%">商铺名称</th>
                    <th width="10%">会员手机</th>
                    <th width="10%">会员名称</th>
                    <th width="16%">支付时间</th>
                    <th width="10%">支付方式</th>
                    <th width="10%">订单金额</th>
                    <th width="10%">操作</th>
                </tr>
                <template v-if="orders&&orders.length>0">
                    <tr v-for="(order,index) in orders">
                        <td>{{index+1}}</td>
                        <td>{{order.sn}}</td>
                        <td>{{order.companyName}}</td>
                        <td>{{order.memberPhone}}</td>
                        <td>{{order.memberName}}</td>
                        <td>{{order.payTime}}</td>
                        <td>{{payMap[order.payType]}}</td>
                        <td>{{order.totalFee}}</td>
                        <td>
                            <div v-if="order.drawback">
                                <span id="drawbackDesc">已退款</span>
                            </div>
                            <div v-else>
                                <input id="drawbackButton" type="button" class="btn btn-primary drawback-btn"
                                       @click="drawback(order.sn)" value="退款"/>
                            </div>
                        </td>
                    </tr>
                </template>
                <template v-else>
                    <tr>
                        <td colspan="8">没有订单列表</td>
                    </tr>
                </template>
            </table>
        </div>
        <div id="page"></div>
    </div>
</div>
</body>
<script type="text/javascript">
    var data = {};
    var vue = {};
    var form = {};
    vue.initialize = function () {
        form.companyName = "";
        form.memberPhone = "";
        form.memberName = "";
        form.sn = "";
        form.payType = "";
        data.channelTxt = "全部";
        data.orders = [];
        data.form = form;
        initPayType();
        new Vue({
            el: "#container-wrap",
            data: data,
            methods: vue
        });
        request();
        Vue.nextTick(function () {
            bindEvent();
            $("#container-wrap").show();
        });
    };
    vue.query = function () {
        resetQuery();
        request();
    };

    vue.drawback = function (orderId) {

        layer.confirm('确定对此订单进行退款操作吗？', {
            btn: ['确定', '取消']
        }, function () {
            $.ajax({
                url: '/trade_manage/order/drawback',
                type: 'POST',
                data: {
                    'orderId': orderId,
                },
                contentType: "application/x-www-form-urlencoded;charset=UTF-8",
                dataType: "json",
                success: function (result) {
                    layer.msg('操作成功', {icon: 1});
                },
                error: function () {
                    layer.msg('操作失败', {icon: 2});
                }
            });
        }, function () {
            layer.msg('已取消', {icon: 1});
        });
    };
    vue.reset = function () {
        util.reset(form);
        data.channelTxt = "全部";
    };
    vue.channelSelect = function (status) {
        if (status == '-1') {
            data.channelTxt = "全部";
            form.payType = "";
        } else if (status == '1') {
            data.channelTxt = "支付宝";
            form.payType = status;
        } else if (status == '2') {
            data.channelTxt = "微信";
            form.payType = status;
        }
    };

    function resetQuery() {
        form.currentPageIndex = 1;
    };

    function request() {
        var load_id = util.load();
        util.syncPost({
            url: "list",
            data: form,
            success: function (result) {
                $.extend(data, result);
                Vue.nextTick(function () {
                    page();
                });
            },
            complete: function () {
                layer.close(load_id);
            }
        });
    };

    function bindEvent() {
        util.laydate({
            elem: '#begin_create_time',
            done: function (time, date, endDate) {
                form.beginCreateTime = time;
            }
        });
        util.laydate({
            elem: '#end_create_time',
            done: function (time, date, endDate) {
                form.endCreateTime = time;
            }
        });
        util.laydate({
            elem: '#begin_pay_time',
            done: function (time, date, endDate) {
                form.beginPayTime = time;
            }
        });
        util.laydate({
            elem: '#end_pay_time',
            done: function (time, date, endDate) {
                form.endPayTime = time;
            }
        });

    };

    function page() {
        util.laypage({
            elem: 'page',
            count: data.totalRecord,
            limit: form.pageSize,
            curr: form.currentPageIndex,
            jump: function (obj, first) {
                form.currentPageIndex = obj.curr;
                if (!first) {
                    form.pageSize = obj.limit;
                    request();
                }
            }
        });
    };

    function orderExport() {
        util.confirm("确认导出？", function () {
            util.exportFile("export", form);
        });
    };

    function initPayType() {
        var map = {};
        map["1"] = "支付宝";
        map["2"] = "微信";
        data.payMap = map;
    };

    function initialize() {
        layui.use(['laydate', 'laypage'], function () {
            laydate = layui.laydate;
            laypage = layui.laypage;
            vue.initialize();
        });
    };
</script>
</html>